<!--
 * @Author: suJiuFu 15070021572@jq.com
 * @Date: 2022-10-08 15:34:26
 * @LastEditors: suJiuFu 15070021572@jq.com
 * @LastEditTime: 2022-10-19 11:57:09
 * @FilePath: \pc-cashier\public\order.html
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>打印订单</title>
    <style>
      @page {
        margin: 0;
        size: 80mm auto; /* 动态高度，防止分页 */
      }

      @media print {
        body {
          margin: 0;
          padding: 0;
          width: 80mm;
          min-height: 100vh;
        }

        /* 确保所有内容在一页内，防止分页 */
        * {
          page-break-inside: avoid !important;
          page-break-before: avoid !important;
          page-break-after: avoid !important;
        }
      }

      #order {
        text-align: center;
        width: 100%;
      }

      #order h1 {
        width: 100%;
        font-size: 20px;
        color: #000;
      }

      #order ul {
        width: 100%;
        list-style: none;
        padding: 0;
        margin: 0;
      }

      #order ul li {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
      }

      #order ul li h2 {
        font-size: 14px;
        font-weight: normal;
      }

      #order ul li div {
        width: 40%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 12px;
        color: #000;
      }
    </style>
  </head>

  <body>
    <!-- 测试专用，后期删除掉这个文件 -->
    <div id="order">
      <h1>{{postMessageDatas.title}}</h1>
    </div>
    <script src="./js/vue.min.js"></script>
    <script>
      var vm = new Vue({
        el: '#order',
        data: {
          postMessageDatas: {}
        },
        mounted() {
          const { ipcRenderer } = require('electron')
          ipcRenderer.on('print-info', (event, printerName, mess) => {
            this.postMessageDatas = mess
            // 获取内容高度并发送打印请求
            this.$nextTick(() => {
              const height = document.getElementById('order').offsetHeight
              ipcRenderer.send('printStart', printerName, height)
            })
          })
        }
      })
    </script>
  </body>
</html>
